<template>
  <div class="wrapper">
    <el-card>
      <div class="rowDiv">
        <div class="row-left">
          <div class="row-item">
            <span class="demonstration">下单日期:</span>
            <el-date-picker
              type="daterange"
              clearable
              v-model="state.value1"
              @change="chooseTimeRange"
              range-separator="至"
            >
            </el-date-picker>
          </div>
          <div class="row-item">
            发货单状态:<el-select
              v-model="state.waretype"
              @change="getOrderlist"
              clearable
              placeholder="选择订单状态"
            >
              <template v-for="(item, key) in state.tabArr">
                <el-option :label="item" :value="key"></el-option>
              </template>
            </el-select>
          </div>
          <el-button type="primary" @click="resetFields()"
            >导出发货单</el-button
          >
        </div>
        <div class="row-right">
          <searchDiv
            :placeholder="state.placeholder"
            :msg="state.keywords"
            @searchClick="searchClick"
          ></searchDiv>
        </div>
      </div>
      <!-- 自己组造数据 -->
      <table class="order-headr-fixed text-center" border="1">
        <tr>
          <th class="w14">商品名称</th>
          <th class="w6">实发数量(箱)</th>
          <th class="w10">物流信息</th>
          <th class="w10">收货人信息</th>
          <th class="w6">操作</th>
        </tr>
      </table>
      <div class="order_list">
        <template v-for="(item, index) in state.result">
          <table class="orderTb" border="1">
            <tr>
              <th class="w14"></th>
              <th class="w6"></th>
              <th class="w10"></th>
              <th class="w10"></th>
              <th class="w6"></th>
            </tr>
            <tbody>
              <tr>
                <td colspan="5" class="p-double">
                  <div class="navFlex">
                    <div class="flexleft">
                      <div class="nav-item">发货单ID：{{ item.pre_id }}</div>
                      <div class="nav-item">
                        创建时间:{{ item.create_time }}
                      </div>
                      <div class="nav-item">状态：{{ item.status }}</div>
                      <div class="nav-item">
                        发货仓:{{ item.warehouse_name }}
                        <el-button
                          type="text"
                          @click="edit_ware(item, '修改仓库')"
                          >修改</el-button
                        >
                      </div>
                      <div
                        class="nav-item"
                        style="display: flex; align-items: center"
                      >
                        <div>备注：{{ item.note }}</div>
                        <el-popover
                          placement="top"
                          :width="160"
                          v-model:visible="item.is_note"
                        >
                          <el-input
                            type="textarea"
                            v-model="item.note"
                          ></el-input>
                          <div style="text-align: right; margin: 0">
                            <el-button
                              type="primary"
                              size="mini"
                              @click="hide(item)"
                              >确定</el-button
                            >
                          </div>
                          <template #reference>
                            <el-button type="text" trigger="click"
                              >修改</el-button
                            >
                          </template>
                        </el-popover>
                      </div>
                    </div>
                    <div class="flexright">
                      <el-popover
                        placement="right"
                        :width="420"
                        @show="showOrigin(item.id)"
                        trigger="click"
                      >
                        <template #reference>
                          <div>订单来源</div>
                        </template>
                        <el-table :max-height="200" :data="state.gridData">
                          <el-table-column
                            property="goods_name"
                            label="商品名称"
                          >
                          </el-table-column>
                          <el-table-column
                            property="cartons"
                            label="数量"
                          ></el-table-column>
                          <el-table-column label="来源订单">
                            <template v-slot="scope">
                              <div
                                v-for="child in scope.row.source"
                                :key="child.order_pre_id"
                              >
                                <div>
                                  {{ child.order_pre_id }}({{ child.cartons }})
                                </div>
                              </div>
                            </template>
                          </el-table-column>
                        </el-table>
                      </el-popover>

                      <el-popover
                        placement="right"
                        :width="700"
                        @show="showOrigin(item.id)"
                        trigger="hover"
                      >
                        <template #reference>
                          <div>操作记录</div>
                        </template>
                        <el-table :max-height="200" :data="item.records">
                          <el-table-column
                            property="create_time"
                            label="创建时间"
                          >
                          </el-table-column>
                          <el-table-column
                            property="user"
                            label="操作人"
                          ></el-table-column>
                          <el-table-column
                            property="type"
                            label="类型"
                          ></el-table-column>
                          <el-table-column
                            property="note"
                            label="备注"
                          ></el-table-column>
                          <el-table-column property="cartons" label="附件">
                            <template v-slot="scope">
                              <a
                                v-for="(child, idx) in scope.row.file"
                                :href="child.file"
                                :key="child.file"
                                download="附件"
                                >附件</a
                              >
                            </template>
                          </el-table-column>
                        </el-table>
                      </el-popover>
                    </div>
                  </div>
                </td>
              </tr>
              <!-- 循环tr -->
              <template v-for="(child, index) in item.items">
                <tr>
                  <template v-if="index == 0">
                    <td>{{ child.goods_name }}</td>
                    <td>{{ child.cartons }}({{ child.count }}件)</td>
                    <td :rowspan="item.items.length">
                      <div class="cssFlex">
                        <div class="logs-left">
                          <div>模板:{{ item.template }}</div>
                          <div>物流:{{ item.express_name }}</div>
                          <div>单号:{{ item.express_num }}</div>
                          <div>重量:</div>
                          <div>运费:{{ item.transport_fee }}</div>
                        </div>
                        <div class="logs-right">
                          <div
                            v-if="item.can_edit_express"
                            class="editLog"
                            @click="edit_logs(item, '编辑物流')"
                          >
                            编辑
                          </div>
                        </div>
                      </div>
                    </td>
                    <td :rowspan="item.items.length">
                      <div class="cssFlex">
                        <div class="logs-left">
                          <div>收货人:{{ item.receive_name }}</div>
                          <div>
                            用户:{{ item.buyer_name }}({{ item.buyer_alias }})
                          </div>
                          <div>
                            地址:{{ item.province }}{{ item.city
                            }}{{ item.district }}
                          </div>
                          <div>
                            是否自提:{{ item.is_oneself ? "是" : "否" }}
                          </div>
                          <div>送货时间:{{ item.expect_date }}</div>
                        </div>
                        <div v-if="item.can_edit_receive" class="logs-right">
                          <div
                            class="editLog"
                            @click="edit_recive(item, '接口编辑')"
                          >
                            编辑
                          </div>
                        </div>
                      </div>
                    </td>

                    <td align="center" :rowspan="item.items.length">
                      <div class="handDiv">
                      <div
                        class="optionDiv"
                        v-if="item.can_verify"
                        @click="edit_ware(item, '审核')"
                      >
                        审核
                      </div>
                      <div
                        class="optionDiv"
                        v-if="item.can_split"
                        @click="splitBtn(item.id)"
                      >
                        拆合单
                      </div>
                      <div
                        class="optionDiv"
                        v-if="item.can_deliver"
                        @click="edit_logs(item, '发货')"
                      >
                        发货
                      </div>
                      <div
                        class="optionDiv"
                        v-if="item.can_refund"
                        @click="refundBtn(item)"
                      >
                        退款
                      </div>
                      <div
                        class="optionDiv"
                        v-if="item.can_reverse"
                        @click="return_status(item)"
                      >
                        状态回退
                      </div>
                      </div>
                    </td>
                  </template>
                  <template v-else>
                    <td>{{ child.goods_name }}</td>
                    <td>{{ child.cartons }}({{ child.count }}件)</td>
                  </template>
                </tr>
              </template>
            </tbody>
          </table>
        </template>
      </div>
      <Page
        v-if="state.totalPage"
        :totalPage="state.totalPage"
        @changePage="changePage"
      ></Page>
      <!-- 编辑物流 -->
      <el-dialog
        :title="state.good_title"
        v-model="state.log_dialogVisible"
        width="18%"
        center
      >
        <span>
          <el-form
            :model="state.log_form"
            :rules="state.rules"
            ref="form"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="物流">
              <el-select
                v-model="state.log_form.log_methods"
                placeholder="请选择物流"
              >
                <template v-for="item in state.logArr">
                  <el-option
                    :label="item.name"
                    :value="item.express_id"
                  ></el-option>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item label="单号">
              <el-input v-model="state.log_form.order_num"></el-input>
            </el-form-item>
            <el-form-item label="运费">
              <el-input v-model="state.log_form.tran_fee"></el-input>
            </el-form-item>
          </el-form>
        </span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="state.log_dialogVisible = false"
              >取 消</el-button
            >
            <el-button type="primary" @click="over_logs()">确 定</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 编辑收货人 -->
      <el-dialog
        title="编辑收货人"
        v-model="state.recive_dialogVisible"
        width="30%"
        center
      >
        <span>
          <el-form
            :model="state.log_form"
            :rules="state.rules"
            ref="form"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="收货人">
              <el-input v-model="state.log_form.recive_man"></el-input>
            </el-form-item>
            <el-form-item label="所在地区">
              <el-col :span="6">
                <el-select
                  type="date"
                  placeholder="请选择"
                  @change="change_province"
                  v-model="state.log_form.province"
                  style="width: 100%"
                >
                  <template v-for="child in state.provinceArr" :key="child.id">
                    <el-option
                      :value="child.id"
                      :label="child.name"
                    ></el-option>
                  </template>
                </el-select>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="6">
                <el-select
                  placeholder="请选择"
                  @change="change_city"
                  v-model="state.log_form.city"
                  style="width: 100%"
                >
                  <template v-for="child in state.cityArr" :key="child.id">
                    <el-option
                      :value="child.id"
                      :label="child.name"
                    ></el-option>
                  </template>
                </el-select>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="6">
                <el-select
                  v-model="state.log_form.address"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <template v-for="child in state.addressArr" :key="child.id">
                    <el-option
                      :value="child.id"
                      :label="child.name"
                    ></el-option>
                  </template>
                </el-select>
              </el-col>
            </el-form-item>
            <el-form-item label="详细收货地址" prop="desc">
              <el-input
                type="textarea"
                v-model="state.log_form.detailAddress"
              ></el-input>
            </el-form-item>
          </el-form>
        </span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="state.recive_dialogVisible = false"
              >取 消</el-button
            >
            <el-button type="primary" @click="recive_sub()">确 定</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 修改仓库 -->
      <el-dialog
        :title="state.subtype_title"
        width="20%"
        v-model="state.ware_dialogVisible"
        center
      >
        <span>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="仓库类型">
              <el-select
                v-model="state.ware_form.ware_type"
                @change="change_ware_type"
                placeholder="请选择仓库类型"
              >
                <el-option key="0" label="所属仓库" value="0"></el-option>
                <el-option key="1" label="全部仓库" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所选仓库">
              <el-select
                v-model="state.ware_form.warehouse_id"
                placeholder="请选择所选仓库"
              >
                <el-option
                  v-for="item in state.wareData"
                  :key="item.id"
                  :label="item.msg"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="state.ware_dialogVisible = false"
              >取 消</el-button
            >
            <el-button type="primary" @click="edit_sub_ware()">确 定</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 拆分单弹窗 -->
      <el-dialog
        title="订单拆分"
        v-model="state.split_dialogVisible"
        width="80%"
        center
      >
        <span>
          <div class="orginDiv">
            <div class="split-left">
              <!-- 渲染左侧表格 -->
              <template v-for="(item, parindex) in double">
                <div class="orgin-item">
                  <div class="split-info">
                    <div>
                      重量：{{ item.total_weight.toFixed(2) }}&nbsp;运费:{{
                        item.total_fee
                      }}
                    </div>
                  </div>
                  <table class="table originTb text-center table-bordered">
                    <thead>
                      <tr>
                        <th width="5%">
                          <input
                            @click="checkAll(item, $event)"
                            :checked="
                              item.checkModel.length == item.items.length
                            "
                            class="checkAll form-control"
                            type="checkbox"
                          />
                        </th>
                        <th width="14%">发货单号</th>
                        <th width="20%">商品名称</th>
                        <th width="7%">数量(箱)</th>
                        <th width="20%">收货人信息</th>
                        <th width="15%">操作</th>
                      </tr>
                    </thead>
                    <tbody>
                      <template v-if="item.rowspan == 0">
                        <tr>
                          <td colspan="6">暂无数据</td>
                        </tr>
                      </template>
                      <template v-else>
                        <template v-for="(child, idx) in item.items">
                          <template v-if="child.cartons > 0">
                            <tr :data-id="item.id">
                              <!-- 复选框 -->
                              <td>
                                <input
                                  v-model="item.checkModel"
                                  :value="child.goods_id"
                                  type="checkbox"
                                  class="form-control"
                                />
                              </td>
                              <!-- 发货单号 -->
                              <template v-if="child.rowspan == 0">
                                <td :rowspan="item.items.length">
                                  {{ item.pre_id }}
                                </td>
                              </template>
                              <!-- 商品名 -->
                              <td>{{ child.goods_name }}</td>
                              <td>{{ child.cartons }}</td>
                              <!-- 收货相关信息 -->
                              <template v-if="child.rowspan == 0">
                                <td :rowspan="item.items.length">
                                  <div>收货人:{{ item.receive_name }}</div>
                                  <div>收货电话:{{ item.receive_phone }}</div>
                                  <div>
                                    地址:{{ item.province }}{{ item.city
                                    }}{{ item.receive_address }}
                                  </div>
                                  <div>期望发货时间:{{ item.expect_date }}</div>
                                </td>
                              </template>
                              <!-- 操作 -->
                              <td>
                                <div class="calcDiv">
                                  <button class="btn prev" @click="prev(child)">
                                    -
                                  </button>
                                  <el-input
                                    type="number"
                                    class="val"
                                    @change="editVal(child)"
                                    v-model="child.input_cartons"
                                  >
                                  </el-input>
                                  <button class="btn add" @click="add(child)">
                                    +
                                  </button>
                                </div>
                              </td>
                            </tr>
                          </template>
                        </template>
                      </template>
                    </tbody>
                  </table>
                </div>
              </template>
            </div>
            <!-- 右侧添加发货单 -->
            <div class="split-right">
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: flex-end;
                "
              >
                <button class="btn btn-button" @click="addTargetItem">
                  添加发货单
                </button>
              </div>
              <div class="itemList">
                <template v-for="(item, parindex) in rightData">
                  <div class="target-item">
                    <div class="targetLeft">
                      <div class="switchDiv">
                        <button
                          class="btn btn-button"
                          @click="pushLeft(item, parindex)"
                        >
                          &lt;
                        </button>
                        <button
                          class="btn btn-button"
                          @click="pushRight(parindex)"
                        >
                          &gt;
                        </button>
                      </div>
                    </div>
                    <div class="targetRight">
                      <div
                        style="
                          display: flex;
                          align-items: center;
                          white-space: nowrap;
                          justify-content: space-between;
                        "
                      >
                        <div class="split-info">
                          <div>
                            重量：{{ item.total_weight.toFixed(2)
                            }}<span class="weightTarget"></span>
                          </div>
                          <div
                            style="
                              width: 150px;
                              display: flex;
                              align-items: center;
                            "
                          >
                            &nbsp;运费：
                            <el-input
                              v-model="item.transport_fee"
                              :min="0"
                              type="number"
                              :size="small"
                            ></el-input>
                          </div>
                        </div>
                        <div @click="delSquare(item, parindex)">移除</div>
                      </div>
                      <table class="table table-bordered text-center targetTb">
                        <thead>
                          <tr>
                            <th width="5%"></th>
                            <th width="20%">商品名称</th>
                            <th width="10%">数量(箱)</th>
                            <th width="25%">收货人信息</th>
                          </tr>
                        </thead>
                        <tbody>
                          <template v-for="(child, idx) in item.items">
                            <tr :data-id="item.id">
                              <!-- 复选框 -->
                              <td>
                                <input
                                  v-model="item.checkModel"
                                  :value="child"
                                  type="checkbox"
                                  class="form-control"
                                />
                              </td>
                              <td>{{ child.goods_name }}</td>
                              <td>{{ child.cartons }}</td>
                              <template v-if="idx == 0">
                                <td align="left" :rowspan="item.items.length">
                                  <div>收货人:{{ item.receive_name }}</div>
                                  <div>收货电话:{{ item.receive_phone }}</div>
                                  <div>
                                    地址:{{ item.province }}{{ item.city
                                    }}{{ item.receive_address }}
                                  </div>
                                  <div>期望发货时间:{{ item.expect_date }}</div>
                                  <el-button
                                    type="text"
                                    @click="edit_recive(item, '本地编辑',parindex)"
                                    >编辑</el-button
                                  >
                                </td>
                              </template>
                            </tr>
                          </template>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="state.split_dialogVisible = false"
              >取 消</el-button
            >
            <el-button type="primary" @click="confirmPrint()">确 定</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 退款操作 -->
      <el-dialog title="退款操作" v-model="state.refund_dialogVisible" center>
        <span>
          <el-table :max-height="200" :data="refund_data">
            <el-table-column property="goods_name" label="商品名称">
            </el-table-column>
            <el-table-column label="订单号">
              <template v-slot="scope">
                <div v-for="item in scope.row.source" :key="item.order_pre_id">
                  {{ item.order_pre_id }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="箱数">
              <template v-slot="scope">
                <div v-for="item in scope.row.source" :key="item.order_pre_id">
                  {{ item.cartons }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="袋数">
              <template v-slot="scope">
                <div v-for="item in scope.row.source" :key="item.order_pre_id">
                  {{ item.count }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="销售单价(袋)">
              <template v-slot="scope">
                <div v-for="item in scope.row.source" :key="item.order_pre_id">
                  {{ item.price }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="退款单价(袋)">
              <template v-slot="scope">
                <div v-for="item in scope.row.source" :key="item.order_pre_id">
                  <el-input
                    type="number"
                    v-model="item.self_price"
                    @change="self_price(item)"
                  ></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="退款数量(袋)">
              <template v-slot="scope">
                <div v-for="item in scope.row.source" :key="item.order_pre_id">
                  <el-input
                    type="number"
                    @change="self_num(item)"
                    v-model="item.num"
                  ></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="金额">
              <template v-slot="scope">
                <div v-for="item in scope.row.source" :key="item.order_pre_id">
                  <el-input
                    type="number"
                    disabled
                    v-model="item.money"
                  ></el-input>
                </div>
              </template>
            </el-table-column>
          </el-table>
          退款总额：
          <el-row>
            <el-col :span="4"
              ><el-input type="numbert" v-model="total" disabled></el-input
            ></el-col>
          </el-row>
          退款原因：
          <el-input type="textarea" v-model="state.noteTxt"></el-input>
        </span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="state.refund_dialogVisible = false"
              >取 消</el-button
            >
            <el-button type="primary" @click="refund_sub()">退 款</el-button>
          </span>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  ref,
  reactive,
  onMounted,
  watch,
  computed,
  onBeforeMount,
  getCurrentInstance,
  provide,
} from "vue";
import { useRouter } from "vue-router";
import { ElNotification } from "element-plus";
import searchDiv from "@/components/Search.vue";
import Page from "../../components/Pagination.vue";
import { stringify } from 'qs';
export default {
  name:"dispatch_order",
  components: {
    searchDiv,
    Page,
  },
  props: {},
  setup(props) {
    let form = ref("null");
    const { ctx } = getCurrentInstance();
    // 左侧计算属性
    const double = computed(() => {
      let data = state.originData;
      data.forEach((v) => {
        var rowspan = 0;
        v["rowspan"] = 0;
        v["total_weight"] = 0;
        v["total_fee"] = 0;
        v.items.forEach((item) => {
          if (item.cartons > 0) {
            item["rowspan"] = rowspan++;
            v.rowspan++;
          }
          let current_weight = Number(item.cartons) * Number(item.weight);
          let current_fee = Number(v.transport_fee) * Number(v.transport_fee);
          v.total_weight += Number(current_weight);
          v.total_fee += Number(current_fee);
        });
      });
      return data;
    });
    // 右侧计算属性
    const rightData = computed(() => {
      let data = state.targetData;
      data.forEach((v) => {
        v["total_weight"] = 0;
        v.items.forEach((item) => {
          let current_weight = Number(item.cartons) * Number(item.weight);
          v.total_weight += Number(current_weight);
        });
      });
      return data;
    });
    // 退款计算属性
    const refund_data = computed(() => {
      let data = state.refundData;
      data.forEach((v) => {
        v.source.forEach((item) => {
          item["num"] = 0;
          item["money"] = 0;
          item["self_price"] = Number(
            JSON.parse(JSON.stringify(item["price"]))
          );
        });
      });
      return data;
    });
    // 计算总额
    const total = computed(() => {
      let data = state.refundData;
      let total = 0;
      data.map((v) => {
        v.source.forEach((item) => {
          total = Number(total) + Number(item.money);
        });
      });
      return total.toFixed(2);
    });
    const router = useRouter();
    const pover = ref("");
    let state = reactive({
      edit_type: "", //编辑类型
      edit_index:0, //编辑数据的下标
      noteTxt: "",
      total_money: 0,
      tabArr: [], //tab点击
      current_page: "", //当前页
      totalPage: "",
      value1: "",
      begin_date: "",
      end_date: "",
      placeholder: "请输入你要查询的...",
      good_title: "编辑物流",
      gridData: [], //公共订单来源
      common_id: "", //公用id
      subType: "", //有两处修改仓库类型
      subtype_title: "编辑物流",
      ware_form: {
        ware_type: "",
        warehouse_id: "",
      },
      refundData: [], //退款数据
      note_visible: false,
      wareData: [], //仓库数据
      provinceArr: [], //省
      cityArr: [], //市
      addressArr: [], //区
      newArr: [],
      arrLeft: [],
      searchval: "",
      refund_dialogVisible: false,
      ware_dialogVisible: false,
      split_dialogVisible: false,
      recive_dialogVisible: false,
      send_dialogVisible: false,
      wareparent: "",
      waretype: "",
      bindstore: "",
      logArr: "",
      log_form: {
        log_methods: "",
        order_num: "",
        tran_fee: "",
        recive_man: "",
        province: "",
        city: "",
        address: "",
        detailAddress: "",
      },
      rules: {
        log_methods: [
          { required: true, message: "请选择物流", trigger: "change" },
        ],
        order_num: [
          { required: true, message: "请填写订单号", trigger: "blur" },
        ],
        tran_fee: [
          { required: true, message: "请填写运费", trigger: "change" },
        ],
      },
      result: [],
      current_pro_arr: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      originData: [],
      targetData: [
        {
          items: [],
        },
      ],
    });
    // 搜索框
    function searchClick(e) {
      console.log(e);
      state.keywords = e;
      getOrderlist();
    }
    onBeforeMount(()=>{
 console.log(ctx.$router.currentRoute)
      if(ctx.$router.currentRoute.value.redirectedFrom){
        let keyword=ctx.$router.currentRoute.value.redirectedFrom.query.keyword;
        state.keywords=keyword || "";
      }
    })
    onMounted(() => {
      get_order_status();
      getOrderlist();
    });
    // 获取页面数据
    function getOrderlist() {
      ctx.$http
        .get("/tanxiaji/delivery/list/", {
          status: state.waretype,
          start_date: state.begin_date,
          end_data: state.end_date,
          keywords: state.keywords || "",
          buyer_id: "",
          page_count: "",
          page: state.current_page,
        })
        .then((res) => {
          if (res.errno == 0) {
            res.data.result.forEach((v) => {
              v["is_note"] = false;
            });
            state.result = res.data.result;
            state.totalPage = res.data.page_count;
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 修改备注
    function hide(item) {
      let { id, note } = item;
      ctx.$http
        .post("/tanxiaji/delivery/note_edit/", {
          w_order_id: id,
          note: note,
        })
        .then((res) => {
          if (res.errno == 0) {
            ElNotification.success(res.errmsg);
            item.is_note = false;
            getOrderlist();
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 点击拆分单按钮
    function splitBtn(id) {
      get_split_order(id);
    }
    // 全选
    function checkAll(item, e) {
      if (e.target.checked) {
        item.items.forEach((v) => {
          if (v.cartons == 0) return;
          item["checkModel"].push(v.goods_id);
        });
        console.log("原数据", state.originData);
        console.log("item-checkmodel", item);
      } else {
        item["checkModel"] = [];
        console.log("原数据", state.originData);
        console.log("item-checkmodel", item);
      }
    }
    // 获取拆单的数据
    function get_split_order(id) {
      state.originData = [];
      state.targetData = [{ items: [] }];
      ctx.$http
        .get("/tanxiaji/delivery/split/pre_data/", { order_id: id })
        .then((res) => {
          state.split_dialogVisible = true;
          ElNotification.success(res.errmsg);
          let data = res.data;
          data.forEach((v) => {
            v["checkModel"] = [];
            var rowspan = 0;
            v.items.forEach((item) => {
              item["input_cartons"] = JSON.parse(JSON.stringify(item.cartons));
              if (item.cartons > 0) {
                item["rowspan"] = rowspan++;
              }
            });
          });
          console.log(data);
          state.originData = data;
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 获取页面顶部切换tab
    function get_order_status() {
      ctx.$http
        .get("/tanxiaji/delivery/status/list/")
        .then((res) => {
          if (res.errno == 0) {
            state.tabArr = res.data;
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 编辑备注
    function edit_note(index) {}
    // 通过审核
    function allow_order() {
      state.ware_dialogVisible = false;
    }
    // 重置
    function resetFields() {
      state.wareparent = "";
      state.waretype = "";
      state.bindstore = "";
    }
    // 关闭弹窗--并清除表单信息
    function close() {
      form.value.resetFields();
      state.ware_dialogVisible = false;
    }
    // 编辑
    function editRow() {
      state.ware_dialogVisible = true;
    }
    // 查看详情
    function detailRow(idx, data) {
      console.log(idx.row.date);
      router.push({ path: "/order_detail", query: { id: idx.row.date } });
    }
    // 删除
    function deleteRow(index, rows) {
      if (confirm("是否要取消?")) {
      }
    }
    // 打开修改物流
    function new_set_ware() {
      state.log_dialogVisible = true;
    }
    //确认拆分
    function confirmPrint() {
      console.log("left", state.originData);
      console.log("right", state.targetData);
      let left_data = state.originData;
      let right_data = state.targetData;
      // 右侧组转该数据
       let totalArr = [];
       for(let h in right_data){
         let item=right_data[h];
         if(item.items.length){
           let o={};
           o['province'] = item.province;
          o['city'] = item.city;
          o['district'] = item.district;
          o['receive_name'] = item.receive_name;
          o['receive_phone'] = item.receive_phone;
          o['receive_address'] = item.receive_address;
          o['transport_fee'] = item.transport_fee;
          o['freight_name'] = item.freight_name;
          o['order_weight'] = item.order_weight;
          o['expect_date'] = item.expect_date;
          o['is_oneself'] = item.is_oneself ? 1 : 0;
          o.items = [];
            let items = item.items;  //订单的items信息
            for (let k in items) {
                let ooj = {};
                ooj['goods_id'] = items[k].goods_id;
                ooj['count'] = items[k].count;
                ooj['cartons'] = items[k].cartons;
                ooj['source'] = items[k].source;
                ooj['carton'] = items[k].carton;
                o.items.push(ooj);
            }
            totalArr.push(o);
         }
         
       }
      let tempArr = []; //临时存储id
      right_data = right_data.filter((v) => {
        if (v.items.length) {
          v.items.filter((item) => {
            if (!tempArr.includes(item.par_id)) {
              tempArr.push(item.par_id); //用于判断左侧哪个被编辑的订单
            }
          });
        }
      });

      console.log("tempArr", tempArr);
      let orginData = [];
      // 通过右侧已存在的id 将左侧已编辑的订单，取出来
      left_data.filter((v) => {
        if (tempArr.includes(v.id)) {
          let items = v.items;
          let groupArr = [];
          items.forEach((item) => {
            let smallObj = {};
            smallObj["id"] = item.id;
            smallObj["count"] = item.count;
            smallObj["cartons"] = item.cartons;
            smallObj["goods_id"] = item.goods_id;
            smallObj["source"] = item.source;
            smallObj["carton"] = item.source;
            groupArr.push(smallObj);
          });

          let data = {
            city: v.city,
            district: v.district,
            expect_date: v.expect_date,
            freight_name: v.freight_name,
            id: v.id,
            is_oneself: v.is_oneself,
            items: groupArr,
            province: v.province,
            receive_address: v.receive_address,
            receive_name: v.receive_name,
            receive_phone: v.receive_phone,
            transport_fee: v.transport_fee,
          };
          orginData.push(data);
        }
      });
      console.log("左侧组装完的数据", orginData);
      console.log("右侧组装完的数据", state.targetData);
      let obj_data = {
        origins: JSON.stringify(orginData),
        targets: JSON.stringify(totalArr),
      };
      ctx.$http
        .post("/tanxiaji/delivery/split/", obj_data)
        .then((res) => {
          if (res.errno == 0) {
            ElNotification.success(res.errmsg);
            state.split_dialogVisible = false;
            getOrderlist();
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 修改箱规
    function editVal(item) {
      let current = item.input_cartons;
      let origin_num = item.cartons;
      if (current < 1) {
        item.input_cartons = 1;
      }
      if (current > origin_num) {
        item.input_cartons = item.cartons;
      }
    }
    // 减法
    function prev(item) {
      item.input_cartons--;
      editVal(item);
    }
    // 加法
    function add(item) {
      item.input_cartons++;
      editVal(item);
    }
    // 向右推送
    function pushRight(index) {
      // 过滤出左侧被选中的项
      let left_check_data = state.originData;
      let right_data = state.targetData;
      const arr = left_check_data.filter((v) => v.checkModel.length); //找出被选中的父级项
      console.log("父级", arr);
      if (!arr.length) return ElNotification.error("请选择");
      // 首先创建一个发货单暂存区
      let default_item = arr[0];
      arr.forEach((item, idx) => {
        console.log("item", item);
        let obj = right_data[index];
        if (!obj.id) {
          obj["id"] = default_item.id;
          obj["city"] = default_item.city;
          obj["province"] = default_item.province;
          obj["district"] = default_item.district;
          obj["receive_address"] = default_item.receive_address;
          obj["receive_name"] = default_item.receive_name;
          obj["receive_phone"] = default_item.receive_phone;
          obj["expect_date"] = default_item.expect_date;
          obj["province"] = default_item.province;
          obj["order_weight"] = default_item.order_weight;
          obj["is_oneself"] = default_item.is_oneself;
          obj["freight_name"] = default_item.template;
          obj["transport_fee"] = 0;
          obj["checkModel"] = [];
        }
        let current_orgin = item.items;
        let checkmodel_id = item.checkModel;
        console.log("checkmodel_id", checkmodel_id);
        current_orgin.filter((v) => {
          state.newArr = [];
          state.arrLeft = [];
          if (checkmodel_id.includes(v.goods_id)) {
            v.cartons = Number(v.cartons) - Number(v.input_cartons); //总数-手填写数字=差
            let new_goods = JSON.parse(JSON.stringify(v)); //深拷贝
            new_goods.cartons = Number(v.input_cartons); //更新向右侧的cartons数值
            fn1(v.source, v.input_cartons); //计算相关来源
            v.input_cartons = v.cartons; //左侧更新显示最大可输入的值
            new_goods["source"] = state.newArr;
            new_goods["par_id"] = item.id; //此订单的父级
            obj.items.push(new_goods);
          }
        });
        item.checkModel = [];
        right_data[index] = obj;
      });
      console.log("左侧的数据", left_check_data);
      console.log("右侧渲染的数据", right_data);
    }
    // 向左推送
    function pushLeft(right_item, parindex) {
      let check_items = right_item.checkModel; //被勾选的items
      if (!check_items.length) return ElNotification.error("请选择");
      console.log("check_items", check_items);
      check_items.forEach((v, idx) => {
        let sourceArr = v.source; //每一项的来源
        let currentOrigin = LEFT(v.par_id);
        let eligibleArr = currentOrigin.filter(
          (item) => item.goods_id == v.goods_id
        );
        eligibleArr[0]["cartons"] =
          Number(eligibleArr[0]["cartons"]) + Number(v.input_cartons);
        eligibleArr[0]["input_cartons"] = eligibleArr[0]["cartons"];
        let l_sourceArr = eligibleArr[0].source;
        for (let i = 0; i < l_sourceArr.length; i++) {
          for (let j = 0; j < sourceArr.length; j++) {
            if (l_sourceArr[i].order_item_id == sourceArr[j].order_item_id) {
              l_sourceArr[i].cartons =
                Number(l_sourceArr[i].cartons) + Number(sourceArr[i].cartons);
            }
          }
        }
        del(right_item, v, idx);
      });

      console.log("原数据", state.originData);
      console.log("右侧数据", state.targetData);
    }
    // 删除整个
    function delSquare(right_item, parindex) {
      let items = right_item.items;
      items.forEach((v, idx) => {
        let sourceArr = v.source;
        let currentOrigin = LEFT(v.par_id);
        currentOrigin.filter((item, index) => {
          if (item.goods_id == v.goods_id) {
            let source = item.source;
            item["cartons"] = Number(item["cartons"]) + Number(v.input_cartons);
            item["input_cartons"] = item["cartons"];
            for (let i = 0; i < source.length; i++) {
              for (let j = 0; j < sourceArr.length; j++) {
                if (source[i].order_item_id == sourceArr[j].order_item_id) {
                  source[i].cartons =
                    Number(source[i].cartons) + Number(sourceArr[j].cartons);
                }
              }
            }
          }
        });
      });
      state.targetData.splice(parindex, 1);
      console.log("右侧数据", state.targetData);
      console.log("左侧数据", state.originData);
    }
    // 删除右侧数据方法
    function del(right_item, v, idx) {
      let data = right_item.items;
      for (let i = 0; i < data.length; i++) {
        if (data[i] == v) {
          data.splice(i, 1);
        }
      }
      right_item.checkModel = [];
    }
    // 在左侧找出当前订单的父级项
    function LEFT(par_id) {
      return state.originData.filter((v) => v.id == par_id)[0].items;
    }

    // 添加发货单
    function addTargetItem() {
      state.targetData.push({ items: [] });
      console.log("右侧数据", state.targetData);
    }
    // 来源计算
    function fn1(data, sr) {
      state.newArr = [];
      for (let i in data) {
        var source = data[i];
        var cartons = source.cartons; //来源的箱规
        let handleData = JSON.parse(JSON.stringify(data[i]));
        if (cartons == 0) {
          continue;
        }
        if (sr > source.cartons) {
          data[i].cartons = 0;
          state.newArr.push(handleData);
          sr -= cartons;
        } else {
          data[i].cartons = cartons - sr;
          handleData.cartons = sr;
          state.newArr.push(handleData);
          break;
        }
      }
    }
    // 显示仓库对话框
    function edit_ware(item, type) {
      let { id, warehouse_id } = item;
      console.log(type);
      state.subtype_title = type;
      state.ware_dialogVisible = true;
      state.common_id = id;
      get_is_real_ware(id, "0", warehouse_id);
    }
    // 取当前仓库
    function get_is_real_ware(w_order_id, type, wareid) {
      ctx.$http
        .get("/tanxiaji/delivery/get_warehouse_list/", {
          w_order_id: w_order_id,
          type: type,
        })
        .then((res) => {
          state.ware_form.ware_type = type;
          state.wareData = res.data;
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 根据仓库类型筛选符合条件的仓库
    function change_ware_type() {
      state.ware_form.warehouse_id = "";
      get_is_real_ware(state.common_id, state.ware_form.ware_type, "");
    }
    // 提交仓库id
    function edit_sub_ware() {
      let url = "";
      if (state.subtype_title == "修改仓库") {
        url = "/tanxiaji/delivery/set_warehouse/";
      } else {
        url = "/tanxiaji/delivery/verify/";
      }
      if (!state.ware_form.warehouse_id)
        return ElNotification.error("请选择仓库");
      let data = {
        w_order_id: state.common_id,
        warehouse_id: state.ware_form.warehouse_id,
      };
      ctx.$http
        .post(url, data)
        .then((res) => {
          if (res.errno == 0) {
            ElNotification.success(res.errmsg);
            state.ware_dialogVisible = false;
            getOrderlist();
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 显示订单来源
    function showOrigin(id) {
      ctx.$http
        .get("/tanxiaji/delivery/order_score/", { w_order_id: id })
        .then((res) => {
          state.gridData = res.data;
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 编辑物流--发货
    function edit_logs(item, type) {
      console.log(item);
      let { id, express_num, transport_fee } = item;
      state.common_id = id;
      state.good_title = type;
      state.log_form.order_num = express_num;
      state.log_form.tran_fee = transport_fee;
      get_logs(id);
    }

    // 编辑收货人
    function edit_recive(item, tp,index) {
      state.edit_type = tp;
      console.log(index)
      state.edit_index = index;
      let {
        id,
        province,
        city,
        district,
        receive_name,
        receive_address,
      } = item;
      state.common_id = id;
      state.log_form.recive_man = receive_name;
      state.log_form.detailAddress = receive_address;
      state.recive_dialogVisible = true;
      let obj = {
        province,
        city,
        district,
      };
      commonFun(obj);
    }
    /**
     *
     *
     * 获取省市区
     *
     * **/
    function get_province(obj) {
      return new Promise((resolve, reject) => {
        ctx.$http
          .get("/tanxiaji/addr/get_area/", { area_id: "" })
          .then((res) => {
            if (res.errno == 0) {
              state.provinceArr = res.data;
              let item = res.data.find((v) => v.name == obj["province"]);
              state.log_form.province = item.id;
              let message = {
                id: item["id"],
                city: obj["city"],
                district: obj["district"],
              };
              resolve(message);
            }
          })
          .catch((err) => {
            reject(err);
            ElNotification.error(err);
          });
      });
    }
    function get_city(msg) {
      return new Promise((resolve, reject) => {
        ctx.$http
          .get("/tanxiaji/addr/get_area/", { area_id: msg.id })
          .then((res) => {
            if (res.errno == 0) {
              state.cityArr = res.data;
              state.log_form.city = res.data[0].id;
              let item = res.data.find((v) => v.name == msg["city"]);
              let message = {
                id: item["id"],
                district: msg["district"],
              };
              resolve(message);
            }
          })
          .catch((err) => {
            reject(err);
            ElNotification.error(err);
          });
      });
    }
    function get_address(msg) {
      console.log("distrct", msg);
      return new Promise((resolve, reject) => {
        ctx.$http
          .get("/tanxiaji/addr/get_area/", { area_id: msg.id })
          .then((res) => {
            if (res.errno == 0) {
              state.addressArr = res.data;
              let item = res.data.find((v) => v.name == msg["district"]);
              state.log_form.address = item.id;
            }
          })
          .catch((err) => {
            ElNotification.error(err);
          });
      });
    }
    // 统一方法编辑省市区
    async function commonFun(obj) {
      let pro = await get_province(obj);
      let city = await get_city(pro);
      get_address(city);
    }
    /***
     * 省市区下拉改变
     **/
    function change_province(e) {
      ctx.$http
        .get("/tanxiaji/addr/get_area/", { area_id: e })
        .then((res) => {
          if (res.errno == 0) {
            state.cityArr = res.data;
            state.log_form.city = "";
            state.log_form.address = "";
            state.addressArr = [];
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    function change_city(e) {
      ctx.$http
        .get("/tanxiaji/addr/get_area/", { area_id: e })
        .then((res) => {
          if (res.errno == 0) {
            state.addressArr = res.data;
            state.log_form.address = res.data[0].id;
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }

    //收货人提交
    function recive_sub() {
      if (state.edit_type == "接口编辑") {
        let pro = state.log_form.province;
        let city = state.log_form.city;
        let district = state.log_form.address;
        let obj = {
          receive_name:state.log_form.recive_man,
          province: state.provinceArr.find((v) => v.id == pro).name,
          city: state.cityArr.find((v) => v.id == city).name,
          district: state.addressArr.find((v) => v.id == district).name,
          receive_address: state.log_form.detailAddress,
        };
        let data = {
          w_order_id: state.common_id,
          data: JSON.stringify(obj),
        };
        ctx.$http
          .post("/tanxiaji/delivery/edit/", data)
          .then((res) => {
            if (res.errno == 0) {
              ElNotification.success(res.errmsg);
              state.recive_dialogVisible = false;
              getOrderlist();
            }
          })
          .catch((err) => {
            ElNotification.error(err);
          });
      }else{
        let item=state.targetData[state.edit_index];
        let pro = state.log_form.province;
        let city = state.log_form.city;
        let district = state.log_form.address;
        item.receive_name=state.log_form.recive_man;
        item.province = state.provinceArr.find((v) => v.id == pro).name;
        item.city = state.cityArr.find((v) => v.id == city).name;
        item.district=state.addressArr.find((v) => v.id == district).name
        item.receive_address =  state.log_form.detailAddress ;
        state.recive_dialogVisible = false;
      }
    }
    //退款提交
    function refund_sub() {
      //组装数据
      console.log(state.refundData);
      let data = state.refundData;
      let items = [];
      data.forEach((item) => {
        item.source.forEach((v) => {
          let obj = {};
          obj["goods_id"] = item.goods_id;
          obj["count"] = Number(v.num);
          obj["cartons"] = item.cartons;
          obj["carton"] = item.carton;
          obj["item_id"] = v.order_item_id;
          obj["order_id"] = v.order_id;
          obj["amount"] = v.self_price;
          obj["goods_amount"] = Number(v.money);
          obj["w_item_id"] = item.id;
          if (v.num > 0) {
            items.push(obj);
          }
        });
      });
      if (!items.length) return ElNotification.error("请填写相关退款商品信息");
      console.log(items);
      ctx.$http
        .post("/tanxiaji/delivery/refund/", {
          w_order_id: state.common_id,
          note: state.noteTxt,
          amount: total.value,
          items: JSON.stringify(items),
        })
        .then((res) => {
          if (res.errno == 0) {
            ElNotification.success(res.errmsg);
            getOrderlist();
            state.refund_dialogVisible = false;
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          reject(err);
          ElNotification.error(err);
        });
    }
    // 回退状态
    async function return_status(item) {
      let status = await get_order_current_status(item.id);
      if (confirm("是否将此订单状态回退" + status + "状态")) {
        ctx.$http
          .post("/tanxiaji/delivery/order_rollback/", {
            w_order_id: item.id,
          })
          .then((res) => {
            if (res.errno == 0) {
              ElNotification.success(res.errmsg);
              getOrderlist();
            } else {
              ElNotification.error(res.errmsg);
            }
          })
          .catch((err) => {
            ElNotification.error(err);
          });
      }
    }
    // 获取订单当前状态
    function get_order_current_status(id) {
      return new Promise((resolve, reject) => {
        ctx.$http
          .get("/tanxiaji/delivery/get_order_rollback_status/", {
            w_order_id: id,
          })
          .then((res) => {
            if (res.errno == 0) {
              resolve(res.data.last_order_status_name);
            }
          })
          .catch((err) => {
            reject(err);
            ElNotification.error(err);
          });
      });
    }
    function send_window() {
      state.send_dialogVisible = true;
    }
    // 获取物流
    function get_logs(id) {
      ctx.$http
        .get("/tanxiaji/delivery/express_list/", { w_order_id: id })
        .then((res) => {
          if (res.errno == 0) {
            state.logArr = res.data;
            state.log_form.log_methods = res.data[0].express_id;
            state.log_dialogVisible = true;
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 编辑完物流
    function over_logs() {
      if (!state.log_form.order_num) return ElNotification.error("请填写单号");
      let data = {
        w_order_id: state.common_id,
        express_id: state.log_form.log_methods,
        logistics_bill: state.log_form.order_num,
        transport_fee: state.log_form.tran_fee,
      };
      ctx.$http
        .post("/tanxiaji/delivery/change_delivery_info/", data)
        .then((res) => {
          if (res.errno == 0) {
            state.log_dialogVisible = false;
            ElNotification.success(res.errmsg);
            getOrderlist();
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 发货提交
    function sub_good() {
      console.log("发货");
    }
    function changePage(e) {
      state.current_page = e;
    }
    // 时间范围取值格式化
    function chooseTimeRange(e) {
      if (e != null) {
        state.begin_date = dayjs(e[0]).format("YYYY-MM-DD");
        state.end_date = dayjs(e[1]).format("YYYY-MM-DD");
      } else {
        state.begin_date = "";
        state.end_date = "";
      }
      getOrderlist();
    }
    // 退款操作
    function refundBtn(item) {
      state.common_id = item.id;
      state.noteTxt = "";
      ctx.$http
        .get("/tanxiaji/delivery/order_score/", { w_order_id: item.id })
        .then((res) => {
          if (res.errno == 0) {
            state.refund_dialogVisible = true;
            state.refundData = res.data;
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 修改单价
    function self_price(item) {
      item.money = Number(item.self_price) * Number(item.num);
    }
    // 修改单价
    function self_price(item) {
      item.money = Number(item.self_price) * Number(item.num);
    }
    // 修改数量
    function self_num(item) {
      item.money = (Number(item.self_price) * Number(item.num)).toFixed(2);
    }
    return {
      refund_sub,
      total,
      self_num,
      refund_data,
      over_logs,
      keywords: "",
      chooseTimeRange,
      changePage,
      searchClick,
      send_window,
      return_status,
      recive_sub,
      edit_logs,
      edit_recive,
      showOrigin,
      rightData,
      form,
      state,
      resetFields,
      editRow,
      detailRow,
      deleteRow,
      new_set_ware,
      close,
      confirmPrint,
      allow_order,
      splitBtn,
      editVal,
      prev,
      add,
      checkAll,
      pushRight,
      pushLeft,
      double,
      addTargetItem,
      delSquare,
      edit_ware,
      change_ware_type,
      edit_sub_ware,
      hide,
      change_province,
      change_city,
      refundBtn,
      self_price,
      getOrderlist
    };
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  height: 100%;
  .el-card {
    height: 100%;
    overflow-y: auto;
    .cart-title::before {
      content: " ";
      width: 4px;
      height: 20px;
      background: #1890ff;
      display: inline-block;
      vertical-align: middle;
      margin-right: 5px;
    }
    .rowDiv {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      .row-left {
        display: flex;
        width: 70%;
        justify-content: space-between;
        .row-item {
          display: flex;
          align-items: center;
          white-space: nowrap;
        }
      }
      .row-right {
        width: 15%;
        display: flex;
        justify-content: flex-end;
      }
    }
    .el-table /deep/ th {
      background-color: #eaeaea;
      text-align: center;
    }
    .el-table /deep/ td {
      text-align: center;
    }
    .el-select {
      width: 100%;
    }
    // 组装table
    .order-headr-fixed {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
      font-size: 13px;
      border: none;
      color: #909399;
      th {
        text-align: center;
        background: #eaeaea;
        padding: 8px 0;
        border: none;
      }
    }
    // 订单表格
    .order_list {
      .orderTb {
        width: 100%;
        border-collapse: collapse;
        border: none;
        font-size: 14px;
        margin-top: 8px;
      }
      .orderTb tr td {
        padding: 2px 8px;
      }
      .orderTb tr th {
        padding: 0;
        border: none;
      }
      .orderTb:hover {
        background: #f7f8fa;
      }
      .p-double {
        background: #f7f8fa;
      }
      .navFlex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f7f8fa;
        .flexleft {
          display: flex;
          align-items: center;
          width: 84%;
          .nav-item {
            margin-right: 80px;
          }
        }
        .flexright {
          cursor: pointer;
          color: rgb(46, 127, 181);
          position: relative;
          flex: 1;
          display: flex;
          justify-content: space-between;
        }
      }
      .cssFlex {
        display: flex;
        justify-content: space-between;
        .logs-right {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          .editLog {
            cursor: pointer;
            color: rgb(46, 127, 181);
          }
        }
      }
      .optionDiv {
        padding: 4px 0;
        cursor: pointer;
        color: rgb(46, 127, 181);
      }
      .optionDiv:hover {
        text-decoration: underline;
      }
    }
    // 拆分单
    .orginDiv {
      display: flex;
      justify-content: space-between;
      padding: 5px;
      border: 1px dashed gainsboro;
      .split-left,
      .split-right {
        width: 50%;
        box-sizing: border-box;
        height: 570px;
        overflow-y: auto;
      }
      // 左侧
      .split-info {
        display: flex;
        align-items: center;
        padding: 10px 0;
      }
      input[type="checkbox"] {
        width: 20px;
        height: 20px;
        margin: auto;
        vertical-align: middle;
      }
      .originTb tr td {
        padding: 2px;
        vertical-align: middle;
      }
      .originTb tr th {
        white-space: nowrap;
        padding: 6px 0;
        vertical-align: middle;
        text-align: center;
      }
      .calcDiv {
        display: flex;
        justify-content: center;
        align-items: center;
        .prev {
          outline: none;
          border: 1px solid #dcdfe6;
          background: #f2f2f2;
          width: 40px;
          height: 33px;
          cursor: pointer;
          border-radius: 4px 0 0 4px;
        }
        .val {
          text-align: center;
        }
        .add {
          outline: none;
          height: 33px;
          border: 1px solid #dcdfe6;
          background: #f2f2f2;
          width: 40px;
          border-radius: 0 4px 4px 0;
          cursor: pointer;
        }
      }

      // 右侧
      .target-item {
        display: flex;
        margin-bottom: 10px;
      }
      .targetLeft {
        width: 15%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .targetRight {
        width: 85%;
      }
      .switchDiv {
        display: flex;
        flex-direction: column;
        padding: 0 5px;
        align-items: center;
        padding-top: 50px;
      }

      .switchDiv button {
        width: 60px;
        height: 30px;
        margin: 5px 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .targetTb tr td {
      vertical-align: middle;
    }
    .w14 {
      width: 14%;
    }
    .w6 {
      width: 6%;
    }
    .w10 {
      width: 10%;
    }
    .w6 {
      width: 6%;
    }
    .handDiv{
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
    }
  }
}
</style>